import React from "react";
import echarts from "echarts"
import {connect} from "dva";
import {Input, Row, Select, Popover, Col, Button, Card} from "antd";
import {currentTime, dateFormat} from "@/utils/time";
import {addResizeHook} from "@/utils/resize";
import styles from "./index.less"

class ParamAnalysis extends React.Component {

  state = {
    paramOnSelect: {key: 'CG_SJ_SJJ_SJ02_YDWDB', name: '北烟道废气温度'},
    groupLevel: 'day',
    minMaxArray: ['最大值: ', '最小值: '],
    option: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['流量'],
        left: 10,
        top: 10
      },
      graphic: [
        {
          type: 'group',
          left: '80%',
          bottom: '85%',
          children: [
            {
              type: 'rect',
              z: 100,
              left: 'center',
              shape: {
                width: 190,
                height: 40
              },
              style: {
                fill: '#fff',
                stroke: '#555',
                lineWidth: 2,
                shadowBlur: 8,
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            },
            {
              type: 'text',
              z: 100,
              top: 5,
              right: '90%',
              style: {
                fill: '#333',
                text: '',
                font: '14px Microsoft YaHei'
              }
            }
          ]
        }
      ],
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [],
        type: 'line'
      }]
    }
  };


  params = [{
    category: "混料", details: [
      {key: 'CG_SJ_SJJ_SJ02_HHLSF', name: '混合料水分'},
      {key: 'CG_SJ_SJJ_SJ02_HHLDLZ', name: '混合料斗料重'}
    ]
  },
    {
      category: "布料", details: [
        {key: 'CG_SJ_SJJ_SJ02_YGJXS', name: '圆辊速度'},
        {key: 'CG_SJ_SJJ_SJ02_JGJXS', name: '九辊速度'}
      ]
    },
    {
      category: "点火", details: [
        {key: 'CG_SJ_SJJ_SJ02_DHWD', name: '点火温度'},
        {key: 'CG_SJ_SJJ_SJ02_MQZGYL', name: '煤气支管压力'},
        {key: 'CG_SJ_SJJ_SJ02_MQZGLL', name: '煤气支管流量'},
        {key: 'CG_SJ_SJJ_SJ02_ZRFWD', name: '空气支管温度'},
        {key: 'CG_SJ_SJJ_SJ02_KQGDYL', name: '空气支管压力'},
        {key: 'CG_SJ_SJJ_SJ02_ZRFLL', name: '空气支管流量'},
      ]
    },
    {
      category: "烟道", details: [
        {key: 'CG_SJ_SJJ_SJ02_YDWDB', name: '北烟道废气温度'},
        {key: 'CG_SJ_SJJ_SJ02_YDWDN', name: '南烟道废气温度'},
        {key: 'CG_SJ_SJJ_SJ02_SJDYDFY02', name: '北烟道负压'},
        {key: 'CG_SJ_SJJ_SJ02_SJDYDFY01', name: '南烟道负压'},
      ]
    },
    {
      category: "烧结产线", details: [
        {key: 'CG_SJ_SJJ_SJ02_SJJXS', name: '烧结机机速'},
        {key: 'CG_SJ_SJJ_SJ02_FJFL01', name: '风机风量1'},
        {key: 'CG_SJ_SJJ_SJ02_FJFL02', name: '风机风量2'},
        {key: 'CG_SJ_SJJ_SJ02_FMKD01', name: '风门开度1'},
        {key: 'CG_SJ_SJJ_SJ02_FMKD02', name: '风门开度2'},
        {key: 'CG_SJ_SJJ_SJ02_LQSJKYL', name: '单辊冷却水进口压力'},
        {key: 'CG_SJ_SJJ_SJ02_LQSCKYL', name: '单辊冷却水出口压力'},
        {key: 'CG_SJ_SJJ_SJ02_LQSCKLL', name: '单辊冷却水出口流量'},
        {key: 'CG_SJ_SJJ_SJ02_LQSCKWD', name: '单辊冷却水出口温度'},
        {key: 'CG_SJ_SJJ_SJ02_BSXSD', name: '给矿机机速'},
        {key: 'CG_SJ_SJJ_SJ02_HLJXS', name: '环冷机机速'},
        {key: 'CG_SJ_SJJ_SJ02_HLCKWD', name: '环冷出口温度'},
      ]
    },
  ];


  /**
   * 渲染参数
   * @returns {*}
   */
  getParams = () => {
    const s = this.params.map(i => (
        <div className={styles.paramModule}>
          <Row>
            <span>{i.category}</span>
          </Row>
          <Row>
            {
              i.details.map(d => <Col className={styles.paramWrapper} span={4}>
                  <div className={styles.paramStack}
                       onClick={() => this.setState({paramOnSelect: {key: d.key, name: d.name}})}>
                    {d.name}
                  </div>
                </Col>)
            }
          </Row>
        </div>));
    return (<div style={{width: 800}}>
      {s}
    </div>)
  };

  query = () => {
    const {paramOnSelect, groupLevel} = this.state;

    let offset = 0;
    if (groupLevel === 'minute') offset = 60 * 60 * 1000; // 1小时
    if (groupLevel === 'hour') offset = 2 * 24 * 60 * 60 * 1000; // 2天
    if (groupLevel === 'day') offset = 14 * 24 * 60 * 60 * 1000;


    this.state.startTime = new Date(currentTime().valueOf() - offset);
    this.state.endTime = new Date();

    this.props.dispatch({
      type: 'fengxiang/dataGroup',
      payload: {
        start: dateFormat(this.state.startTime),
        end: dateFormat(this.state.endTime),
        tag: paramOnSelect.key,
        groupLevel
      }
    })
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    const {dataGroup} = nextProps;
    const {option, paramOnSelect, chart, data, minMaxArray} = prevState;
    let min;
    let max;
    if (dataGroup && data !== dataGroup && chart) {
      option.legend.data = [paramOnSelect.key];
      option.xAxis.data = [];
      option.series[0].data = [];
      dataGroup.forEach(item => {
        option.xAxis.data.push(item.GMT_CREATE);
        option.series[0].data.push(item[paramOnSelect.key]);
        option.series[0].name = paramOnSelect.key
      });
      min = Math.min.apply(null, option.series[0].data);
      max = Math.max.apply(null, option.series[0].data);
      option.graphic[0].children[1].style.text = [`最大值: ${  max}`,`最小值: ${  min}`].join('\n');
      chart.setOption(option,true)
    }
    // state 不需要更改
    return {data: dataGroup, min, max}
  }


  componentDidMount() {
    const chart = echarts.init(document.getElementById("paramAnylysis"));
    this.state.chart = chart;
    chart.setOption(this.state.option, true);
    addResizeHook(this, chart.resize);

    this.query()
  }

  render() {

    return (
      <div style={{width: '100%'}}>
        <Card bordered={false}>
          <Row>
            <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}
                 style={{paddingLeft: 8, paddingight: 8}}>
              <Row className="ant-form-item">
                <div className="ant-col ant-form-item-label"><label title="参数选择">参数选择</label>
                </div>
                <div className="ant-col ant-form-item-control">
                  <div className="ant-form-item-control-input">
                    <div className="ant-form-item-control-input-content">
                      <Popover placement="top"
                               content={this.getParams()}
                               trigger="click"
                      >
                        <Input placeholder="参数选择"
                               value={this.state.paramOnSelect.name}
                        />
                      </Popover>
                    </div>
                  </div>
                </div>
              </Row>
            </Col>
            <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}
                 style={{paddingLeft: 8, paddingight: 8}}>
              <Row className="ant-form-item">
                <div className="ant-col ant-form-item-label"><label title="统计维度">统计维度</label>
                </div>
                <div className="ant-col ant-form-item-control">
                  <div className="ant-form-item-control-input">
                    <div className="ant-form-item-control-input-content">
                      <Select defaultValue={this.state.groupLevel} placeholder="请选择"
                              onSelect={groupLevel => this.setState({groupLevel})}
                      >
                        <Option value="minute">分</Option>
                        <Option value="hour">时</Option>
                        <Option value="day">日</Option>
                      </Select>
                    </div>
                  </div>
                </div>
              </Row>
            </Col>

            <Col mdlgOffset={12} lgOffset={12} xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}
                 style={{paddingLeft: 8, paddingight: 8}}>
              <div className="ant-row ant-form-item">
                <div className="ant-col ant-form-item-control">
                  <div className="ant-form-item-control-input">
                    <div className="ant-form-item-control-input-content">
                        <Button onClick={this.query}>查询</Button>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
        <Card bordered={false}>
          <div id="paramAnylysis" style={{height: 300}}/>
        </Card>
      </div>

    )
  }
}

export default connect(({fengxiang, loading, global}) => ({
  dataGroup: fengxiang.dataGroup
}))
(ParamAnalysis);
